<!--
 * @Description:  
 * @Author: YiHe
 * @Date: 2020-07-03 08:41:39
 * @LastEditors: YiHe
 * @LastEditTime: 2021-01-06 23:06:11
-->
<template>
	<Container>
		<u-top-tips ref="uTips"></u-top-tips>
		<Back :toHome="toHome" />
		<EditorIcon v-if="hasMerchant || hasExpert || (hasOfficial && detailData.mark === 'recommend1')" :type="detailData.mark === 'recommend1' ? 'hasOfficial' : 'topic'" :sceneId="detailData.id" />
		<Detail :detailData="detailData" />
		<view v-if="commentIsShow && !hasRegisterLink" class="bottom fonts" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="toEvaluate">CHC认知测评</view>
		<view v-if="hasRegisterLink" class="bottom fonts" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="popupShow = true">活动报名</view>
		<Comment v-if="commentIsShow" scene="topic" :sceneId="detailData.id" :scrollTop="scrollTop" />
		<u-popup v-model="popupShow" mode="bottom" :safe-area-inset-bottom="true" border-radius="20" :closeable="true">
			<view class="popup">
				<u-form :model="form" ref="uForm">
					<u-form-item :label-width="220" label="活动方姓名"><u-input :disabled="true" v-model="form.name" /></u-form-item>
					<u-form-item :label-width="220" label="活动方微信号"><u-input :disabled="true" v-model="form.weixinCode" /></u-form-item>
					<u-form-item :label-width="220" label="活动方联系方式"><u-input :disabled="true" v-model="form.contact" /></u-form-item>
					<u-form-item :label-width="220" label="姓名"><u-input v-model="name" /></u-form-item>
					<u-form-item :label-width="220" label="联系方式"><u-input v-model="phone" /></u-form-item>
				</u-form>
				<u-button @click="submit">提交</u-button>
			</view>
		</u-popup>
	</Container>
</template>

<script>
import Detail from '../../components/detail/detail.vue'
import Comment from '../../components/comment/comment.vue'
import EditorIcon from '../../components/editorIcon/editorIcon.vue'
export default {
	data() {
		return {
			detailData: {},
			toHome: false,
			popupShow: false,
			hasMerchant: this.hasMerchant,
			hasExpert: this.hasExpert,
			hasOfficial: this.hasOfficial,
			hasRegisterLink: false,
			scrollTop: 0,
			commentIsShow: true,
			form: {},
			name: '',
			phone: '',
		}
	},
	onShareAppMessage() {
		let item = JSON.stringify(this.detailData)
		item = item.replace(/&nbsp;/g, ' ')
		return {
			title: this.detailData.title,
			path: '/pages/topic/detail?type=share&item=' + item,
			imageUrl: '',
		}
	},
	components: { Detail, Comment, EditorIcon },
	/**
	 * 初始化数据
	 * 如果是预览模式 隐藏底部评论区 和发布
	 * 如果是recommend1 或 recommend1 隐藏发布
	 */
	onLoad(option) {
		if (!option) {
			this.detailData = JSON.parse(this.shareItem)
			this.toHome = true
		} else {
			if (option.type === 'share') {
				this.toHome = true
				this.detailData = JSON.parse(option.item)
			} else {
				this.detailData = JSON.parse(decodeURIComponent(option.item))
			}
		}
		if (this.detailData.type === 'test') {
			this.hasMerchant = false
			this.commentIsShow = false
		}
		if (this.detailData.mark === 'recommend1' || this.detailData.mark === 'recommend2') {
			this.hasMerchant = false
		}
		this.hasRegisterLink = this.detailData.hasRegisterLink
		this.form = this.detailData.organizer
		console.log(this.detailData.mark)
	},
	methods: {
		/**
		 * 	跳转到测评
		 */
		toEvaluate: function () {
			this.$Router.pushTab({ name: 'evaluate' })
		},
		/**
		 *  进入话题编辑
		 */
		editor: function () {
			this.$Router.push({ name: 'editorTopic', query: { id: this.detailData.id } })
		},
		submit: async function () {
			if (!this.name || !this.phone) {
				this.$refs.uTips.show({
					title: '请填写报名信息',
					type: 'warning',
					duration: '2000',
				})
				return
			}
			const option = {
				deviceUuid: this.deviceUuid,
				topicId: this.detailData.id,
				name: this.name,
				phoneNumber: this.phone,
			}
			const [data, err] = await this.awaitWarp(this.$post(this.api.register, option))
			if (data) {
				this.popupShow = false
				this.name = ''
				this.phone = ''
				this.$refs.uTips.show({
					title: '报名成功',
					type: 'success',
					duration: '2000',
				})
			}
		},
	},
	onPageScroll: function (res) {
		this.scrollTop = res.scrollTop
	},
}
</script>

<style scoped lang="stylus">
.bottom
	width 60vw
	height 115rpx
	background linear-gradient(to right, #FDC14B, #FED36B)
	border-radius 40rpx
	color white
	text-shadow 0 0 2rpx #F2B70D
	display flex
	align-items center
	justify-content center
	margin 80rpx auto
	font-size 40rpx
	transition all 0.3s

.popup
	width 700rpx
	margin 30rpx auto
</style>
